<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="decrement">-</button>
<span id="count">0</span>
<button id="increment">+</button>

<script src="https://unpkg.com/redux@4.0.1/dist/redux.min.js"></script>
<script>

    /**
     * 1. 定义reducer函数
     */
    function counterReducer(state={count: 0}, action) {
        if (action.type === 'INCREMENT') {
            return {count: state.count + 1}
        }
        if (action.type === 'DECREMENT') {
            return {count: state.count - 1}
        }
        return state
    }

    /**
     * 2. 根据reducer函数生成store实例
     */
    let store = Redux.createStore(counterReducer);
    let countLabel = document.querySelector('#count');

    /**
     * 3. 订阅数据状态
     */
    store.subscribe(()=> {
        console.log('状态变化了： ', store.getState())
        countLabel.innerText = store.getState().count;
    })

    let inBtn = document.querySelector('#increment');
    inBtn.addEventListener('click', () => {
        // 增
        store.dispatch({
            type: 'INCREMENT'
        })
    })
    let deBtn = document.querySelector('#decrement');
    deBtn.addEventListener('click', () => {
        // 减
        store.dispatch({
            type: 'DECREMENT'
        })
    })
</script>

</body>
</html>